<!DOCTYPE html>

<html style="height: 100%;">

<head>
    <meta charset="utf-8">
    <title>汇总统计图</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../layuiadmin/style/admin.css" media="all">
    <style type="text/css">
        .laytable-cell-radio.layui-table-cell {
            padding: 0 5px 0 15px;
        }
        
        .laytable-cell-radio span {
            display: none;
        }
        
        .laytable-cell-radio .layui-form-radio {
            padding-right: 0;
            margin: 0;
        }
    </style>
</head>

<body style="height: 95%;">
    <!--  <div class="layui-form" style="margin-left:20px;margin-top:15px;margin-bottom:20px">
        <div class="layui-form-item">
            <label class="layui-form-label">汇总年月</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="datetime" placeholder="请选择需要汇总的年月">
            </div>
            <button class="layui-btn" data-type="reload" id="serch">汇总</button>

        </div>
	</div> -->
    <label class="layui-form-label" style="width: 220px;"><span id="nian" style="font-weight: bold;font-size: 16px"></span></label>
    <div id="main" style="height:55%;width:95%;margin-top: 40px"></div>
    <center>
        <table id="demo" lay-filter="test" style="height:45%;margin-top: 40px"></table>
    </center>
    <script src="../../layuiadmin/layui/layui.js"></script>
    <script src="../../layuiadmin/layui/echarts.common.min.js"></script>
    <script src="../../layuiadmin/layui/jquery-3.3.1.min.js"></script>
    <script>
        layui.config({
            base: '../../layuiadmin/' //静态资源所在路径
        }).extend({
            index: 'lib/index' //主入口模块
        }).use(['index']);
        layui.use('laydate', function() {
            var laydate = layui.laydate;

            //执行一个laydate实例
            laydate.render({
                elem: '#datetime', //指定元素
                type: 'month'
            });
        });
        var datetime = new Date();
        nian = datetime.getFullYear() - 1;
        var str = nian + "年收集情况（单位：吨）"
        $("#nian").html(str);
        var myChart = echarts.init($('#main')[0]);
        myChart.showLoading();
        // 为echarts对象加载数据 
        $.ajax({
            url: "../../../All/all1",
            type: "post",
            datatype: "json",
            data: {
                date: 1
            },
            success: function(res) {
                myChart.hideLoading();
                if (res.data) {
                    var num_0 = $.parseJSON(res.data['0']);
                    var num_1 = $.parseJSON(res.data['1']); //res.data[1];
                    var num_2 = $.parseJSON(res.data['3']); // res.data[2];
                    var num_4 = $.parseJSON(res.data['2']); // res.data[3];
                    var num_3 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
                    var monthnum = [];
                    switch (num_0.length) {
                        case 1:
                            monthnum = ['一月'];
                            break;
                        case 2:
                            monthnum = ['一月', '二月'];
                            break;
                        case 3:
                            monthnum = ['一月', '二月', '三月'];
                            break;
                        case 4:
                            monthnum = ['一月', '二月', '三月', '四月'];
                            break;
                        case 5:
                            monthnum = ['一月', '二月', '三月', '四月', '五月'];
                            break;
                        case 6:
                            monthnum = ['一月', '二月', '三月', '四月', '五月', '六月'];
                            break;
                        case 7:
                            monthnum = ['一月', '二月', '三月', '四月', '五月', '六月', '七月'];
                            break;
                        case 8:
                            monthnum = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月'];
                            break;
                        case 9:
                            monthnum = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月'];
                            break;
                        case 10:
                            monthnum = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月'];
                            break;
                        case 11:
                            monthnum = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月'];
                            break;
                        case 12:
                            monthnum = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
                            break;
                    }
                    var option = {
                        color: ['#5CACEE', '#F08080', '#00A851', '#FF8711', '#D7E522'],
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                            }
                        },
                        legend: {

                            data: ['感染性废物', '损伤性废物', '病理性废物', '药物性废物', '化学性废物']

                        },
                        grid: {
                            left: '4%',
                            right: '3%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: [{
                            type: 'value'
                        }],
                        yAxis: {
                            type: 'category',
                            data: monthnum
                        },
                        series: [{
                            name: '感染性废物',
                            type: 'bar',
                            stack: '总量',
                            label: {
                                normal: {

                                    position: 'insideRight'
                                }
                            },
                            data: num_0
                        }, {
                            name: '损伤性废物',
                            type: 'bar',
                            stack: '总量',
                            label: {
                                normal: {

                                    position: 'insideRight'
                                }
                            },
                            data: num_1
                        }, {
                            name: '病理性废物',
                            type: 'bar',
                            stack: '总量',
                            label: {
                                normal: {

                                    position: 'insideRight'
                                }
                            },
                            data: num_2
                        }, {
                            name: '药物性废物',
                            type: 'bar',
                            stack: '总量',
                            label: {
                                normal: {

                                    position: 'insideRight'
                                }
                            },
                            data: num_4
                        }, {
                            name: '化学性废物',
                            type: 'bar',
                            stack: '总量',
                            label: {
                                normal: {

                                    position: 'insideRight'
                                }
                            },
                            data: num_3
                        }]
                    };
                    myChart.setOption(option);
                    var json = [];
                    var x0 = 0;
                    var x1 = 0;
                    var x2 = 0;
                    var x4 = 0;
                    for (var i = 0; i < num_0.length; i++) {
                        x0 += parseFloat(num_0[i]);
                        x1 += parseFloat(num_1[i]);
                        x2 += parseFloat(num_2[i]);
                        x4 += parseFloat(num_4[i]);
                    }
                    json.push({
                        "name": "一月",
                        "grx": num_0[0],
                        "ssx": num_1[0],
                        "blx": num_2[0],
                        "ywx": num_4[0],
                        "hxx": 0
                    });
                    json.push({
                        "name": "二月",
                        "grx": num_0[1],
                        "ssx": num_1[1],
                        "blx": num_2[1],
                        "ywx": num_4[1],
                        "hxx": 0
                    });
                    json.push({
                        "name": "三月",
                        "grx": num_0[2],
                        "ssx": num_1[2],
                        "blx": num_2[2],
                        "ywx": num_4[2],
                        "hxx": 0
                    });
                    json.push({
                        "name": "四月",
                        "grx": num_0[3],
                        "ssx": num_1[3],
                        "blx": num_2[3],
                        "ywx": num_4[3],
                        "hxx": 0
                    });
                    json.push({
                        "name": "五月",
                        "grx": num_0[4],
                        "ssx": num_1[4],
                        "blx": num_2[4],
                        "ywx": num_4[4],
                        "hxx": 0
                    });
                    json.push({
                        "name": "六月",
                        "grx": num_0[5],
                        "ssx": num_1[5],
                        "blx": num_2[5],
                        "ywx": num_4[5],
                        "hxx": 0
                    });
                    json.push({
                        "name": "七月",
                        "grx": num_0[6],
                        "ssx": num_1[6],
                        "blx": num_2[6],
                        "ywx": num_4[6],
                        "hxx": 0
                    });
                    json.push({
                        "name": "八月",
                        "grx": num_0[7],
                        "ssx": num_1[7],
                        "blx": num_2[7],
                        "ywx": num_4[7],
                        "hxx": 0
                    });
                    json.push({
                        "name": "九月",
                        "grx": num_0[8],
                        "ssx": num_1[8],
                        "blx": num_2[8],
                        "ywx": num_4[8],
                        "hxx": 0
                    });
                    json.push({
                        "name": "十月",
                        "grx": num_0[9],
                        "ssx": num_1[9],
                        "blx": num_2[9],
                        "ywx": num_4[9],
                        "hxx": 0
                    });
                    json.push({
                        "name": "十一月",
                        "grx": num_0[10],
                        "ssx": num_1[10],
                        "blx": num_2[10],
                        "ywx": num_4[10],
                        "hxx": 0
                    });
                    json.push({
                        "name": "十二月",
                        "grx": num_0[11],
                        "ssx": num_1[11],
                        "blx": num_2[11],
                        "ywx": num_4[11],
                        "hxx": 0
                    });
                    var snum = 12 - num_0.length;
                    json.splice(num_0.length, snum);
                    json.push({
                        "name": "合计",
                        "grx": x0,
                        "ssx": x1,
                        "blx": x2,
                        "ywx": x4,
                        "hxx": 0
                    });

                    layui.use('table', function() {
                        var table = layui.table;
                        var $ = layui.$;
                        table.render({
                            elem: '#demo',
                            // height: 'full',
                            limit: 13,
                            data: json,
                            cols: [
                                [
                                    //表头
                                    {
                                        field: 'name',
                                        title: '月份',
                                        width: '10%',
                                        align: 'center'

                                    }, {
                                        field: 'grx',
                                        title: '感染性废物',
                                        width: '10%',
                                        align: 'center',
                                        templet: function(d) {
                                            return d.grx.toFixed(2)
                                        }
                                    }, {
                                        field: 'ssx',
                                        title: '损伤性废物',
                                        width: '10%',
                                        align: 'center',
                                        templet: function(d) {
                                            return d.ssx.toFixed(2)
                                        }
                                    }, {
                                        field: 'blx',
                                        title: '病理性废物',
                                        width: '10%',
                                        align: 'center',
                                        templet: function(d) {
                                            return d.blx.toFixed(2)
                                        }
                                    }, {
                                        field: 'ywx',
                                        title: '药物性废物',
                                        width: '10%',
                                        align: 'center',
                                        templet: function(d) {
                                            return d.ywx.toFixed(2)
                                        }
                                    }, {
                                        field: 'hxx',
                                        title: '化学性废物',
                                        width: '10%',
                                        align: 'center',
                                        templet: function(d) {
                                            return d.hxx.toFixed(2)
                                        }
                                    }
                                ]
                            ],
                            skin: 'row' //表格风格
                                ,
                            even: true
                        });
                        $("table th").css({
                            "background": "#1E9FFF",
                            "color": "white"
                        });
                    })
                }
            }
        });
    </script>
</body>

</html>